import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Form } from 'antd';
import styles from './styles.less';
import { PrimaryC } from '@/src/components';

const FormItemLayout = {
  labelCol: {
    xs: { span: 4, offset: 0 },
    sm: { span: 8, offset: 0 },
    md: { span: 8, offset: 0 },
    lg: { span: 8, offset: 0 },
    xl: { span: 7, offset: 0 },
    xxl: { span: 7, offset: 0 },
  },
  wrapperCol: {
    xs: { span: 18, offset: 0 },
    sm: { span: 14, offset: 0 },
    md: { span: 14, offset: 0 },
    lg: { span: 14, offset: 0 },
    xl: { span: 15, offset: 0 },
    xxl: { span: 15, offset: 0 },
  },
};
class OtherNodePanel extends Component {
  // 默认值
  static defaultProps = {
    id: undefined, // 节点ID
    name: undefined, // 节点名称
    nameChanged: () => {}, // 名字变更事件
    mode: 'view', // 默认查看模式
  };

  formRef = React.createRef();

  componentDidMount() {
    this.formRef.current.setFieldsValue({
      id: this.props.id,
      name: this.props.name,
      condition: this.props.condition,
    });
  }

  componentDidUpdate(preProps) {
    if (this.props.id !== preProps.id) {
      this.formRef.current.setFieldsValue({ id: this.props.id });
    }
    if (this.props.name !== preProps.name) {
      this.formRef.current.setFieldsValue({ name: this.props.name == null ? undefined : this.props.name });
    }
  }

  // 点击保存设置
  handleSubmit = async () => {
    const values = await this.formRef.current.validateFields();
    if (values) {
      // 抛出保存设置事件
      this.props.saveOtherNode(values);
    }
  };

  render() {
    const { nameChanged, mode } = this.props;
    return (
      <div className={`${styles.SequenceFlowPannel}`}>
        <div>其他设置</div>
        <Form onFinish={this.handleSubmit} ref={this.formRef}>
          <Form.Item label='编号' name={'id'} {...FormItemLayout} className={'formCls1'}>
            <Input disabled={true} />
          </Form.Item>
          <Form.Item label='名称' name={'name'} {...FormItemLayout} className={'formCls1'}>
            <Input disabled={mode === 'view'} onChange={nameChanged} />
          </Form.Item>
          {mode === 'view' ? null : (
            <Form.Item className={'saveClass'}>
              <PrimaryC title='保存设置' htmlType='submit' />
            </Form.Item>
          )}
        </Form>
      </div>
    );
  }
}
// props默认值
OtherNodePanel.propsTypes = {
  id: PropTypes.string, // 节点ID
  name: PropTypes.string, // 节点名称
  condition: PropTypes.string, // 条件
  nameChanged: PropTypes.func, // 名字变更事件
  mode: PropTypes.string, // 模式（view-不可编辑，editor-可编辑）
};

export default OtherNodePanel;
